<template>
  <div class="cluster-paramter-tools">
      <fold :title="'参数'">
          <div>
              <span>分类个数:</span>
              <el-input 
              :value="the_cluster_count" 
              v-model="the_cluster_count" 
              @change="setClusterCount"
              placeholder="请输入需要分类的个数"></el-input>
          </div>
      </fold>
  </div>
</template>

<script>
import Fold from "@/components/common/Fold.vue";

export default {
  components: {
    Fold,
  },
  props: ["clusterCount"],
  data() {
    return {
      the_cluster_count: this.clusterCount,
      max_count: 6,
    };
  },
  methods: {
    setClusterCount() {
        let clusterCount = Number.parseInt(this.the_cluster_count)
        let hasNumber = Number.isNaN(clusterCount) ? false : true
        if(this.the_cluster_count == ""){
            this.$message.error("请输入要分类的个数")
            return
        }

        else if(!hasNumber){
            this.$message.error("请输入数字")
            return
        }

        else if(clusterCount <= 0){
            this.$message.error("分类个数必须大于0")
            return
        }

        else if(clusterCount > this.max_count){
            this.$message.error("分类个数不能大于"+ this.max_count)
            return
        }

        this.$store.commit('setChartActiveClusterCount', clusterCount)
    },
  },
};
</script>

<style scoped>
    .cluster-paramter-tools{
        margin-bottom:15px;
    }
</style>